<template>
	<view class="indexContainer">
		<!-- 头部 -->
		<view class="header">
			<view class="header-left"><image class="header-img" src="/static/images/logo.png" mode=""></image></view>
			<view class="search"><u-search placeholder="请输入搜索的东西" v-model="keyword" shape="round"></u-search></view>
		</view>

		<!-- tabs标签 -->
		<view v-if="indexData.indexData">
			<u-sticky bgColor="#fff">
				<u-tabs :list="indexData.indexData.kingKongModule.kingKongList" @click="click" lineColor="#bb2c08" keyName='text' :activeStyle="{ color: '#bb2c08' }"></u-tabs></u-sticky>
		</view>
		
		<!-- 内容区 -->
		<u-list v-if="indexData.indexData" :height="screenHeight">
			<Recommend v-if="currentIndex===100" :dataList ='indexData.indexData' />
			<CateList v-else :L1Id='currentIndex'/>
		</u-list>
		
	</view>
</template>

<script>
import request from '../../api/index.js';
import {mapActions,mapState} from "vuex"
import Recommend from "@/components/Recommend/Recommend.vue"
import CateList from "@/components/CateList/CateList.vue"
export default {
	data() {
		return {
			keyword: '', //搜索框关键字
			currentIndex:100,
			screenHeight:0
			// indexData:{},//首页所有数据
			// indexList:[],//首页tab栏数据
		};
	},
	components:{
		Recommend,
		CateList
	},
	methods: {
		...mapActions('home',['getIndexDataActions']),
		click(item) {
			// console.log('item', item);
			this.currentIndex = item.L1Id
		},
	},
	computed:{
		...mapState('home',['indexData']),
	},
	created() {
		this.getIndexDataActions();
	},
	mounted() {
		//获取页面高度
		this.screenHeight = uni.getSystemInfoSync().windowHeight - 88; //获取当前页面的高度
	}
	
	
};
</script>

<style lang="scss">
.header {
	display: flex;
	padding: 10rpx 10rpx;
	justify-content: space-around;
	.header-left {
		display: flex;
		align-items: center;
		margin-right: 10rpx;
		.header-img {
			width: 140rpx;
			height: 40rpx;
		}
	}
	.search {
		flex: 1;
	}
}
</style>
